<template>
  <view class="detail-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-btn" @click="navigateBack">
        <u-icon name="arrow-left" size="40" color="#333"></u-icon>
      </view>
      <view class="title">信息详情</view>
      <view class="operate-btn" @click="sharePost">
        <u-icon name="share" size="40" color="#333"></u-icon>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="isLoading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view class="error-state" v-if="error">
      <text class="error-text">{{ error }}</text>
      <button class="retry-btn" @click="fetchPostDetail(postId)">
        <text>重新加载</text>
      </button>
    </view>

    <!-- 内容区域 -->
    <view v-if="!isLoading && !error && postData">
      <!-- 帖子类型标签 -->
      <view class="post-type-tag" :class="postData.type === 'supply' ? 'supply-tag' : 'demand-tag'">
        <text class="tag-text">{{ postData.type === 'supply' ? '供应' : '需求' }}</text>
      </view>

      <!-- 帖子标题 -->
      <view class="post-title">
        {{ postData.name }}
      </view>

      <!-- 基本信息 -->
      <view class="basic-info">
        <view class="info-row">
          <view class="info-item">
            <text class="info-label">类型：</text>
            <text class="info-value">{{ postData.categoryValue || postData.categoryId }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">数量：</text>
            <text class="info-value">{{ postData.quantity }}{{ postData.unit || '' }}</text>
          </view>
        </view>
        <view class="info-row">
          <view class="info-item">
            <text class="info-label">价格：</text>
            <text class="info-value">¥{{ (postData.price || 0).toFixed(2)||'面议' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">地区：</text>
            <text class="info-value">{{ postData.region || '未填写' }}</text>
          </view>
        </view>
      </view>

      <!-- 图片展示 -->
      <view class="image-gallery" v-if="postData.images">
        <view class="gallery-title">相关图片</view>
        <view class="image-list">
          <view 
            class="gallery-item" 
            v-for="(img, index) in postData.images.split(';')" 
            :key="index"
            @click="previewImage(index)"
          >
            <image 
              :src="img" 
              mode="aspectFill"
              class="gallery-img"
              :alt="postData.name + '图片' + (index + 1)"
            ></image>
          </view>
        </view>
      </view>

      <!-- 详情描述 -->
      <view class="description-section">
        <view class="section-title">详细描述</view>
        <view class="description-content">
          {{ postData.description || '暂无描述' }}
        </view>
      </view>

      <!-- 联系信息 -->
      <view class="contact-section">
        <view class="section-title">联系方式</view>
        <view class="contact-info">
          <u-icon name="phone" size="28" color="#1677FF"></u-icon>
          <text class="contact-phone">{{ postData.phone || '暂无联系方式' }}</text>
          <button class="call-btn" @click="makePhoneCall" v-if="postData.phone">
            <u-icon name="phone" size="28" color="#fff"></u-icon>
            立即联系
          </button>
        </view>
      </view>

      <!-- 发布时间 -->
      <view class="publish-time">
        发布时间：{{ formatTime(postData.publishTime) }}
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar" v-if="!isLoading && !error && postData">
      <button class="contact-btn" @click="makePhoneCall" v-if="postData.phone">
        <u-icon name="phone" size="24" color="#fff"></u-icon>
        电话联系
      </button>
      <button class="share-btn" @click="sharePost">
        <u-icon name="share" size="24" color="#fff"></u-icon>
        分享
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      postId: null, // 帖子ID
      postData: null, // 帖子详情数据
      isLoading: false, // 加载状态
      error: null // 错误信息
    };
  },
  
  onLoad(options) {
    // 从路由参数获取帖子ID
    this.postId = options.id;
    // 获取帖子详情数据
    this.fetchPostDetail(this.postId);
  },
  
  methods: {
    // 获取帖子详情
    async fetchPostDetail(postId) {
      if (!postId) {
        this.error = '帖子ID不能为空';
        return;
      }
      
      this.isLoading = true;
      this.error = null;
      
      try {
        // 调用API获取帖子详情
        const result = await this.$request(`api/v1/supplyDemand/${postId}`, 'get');
        
        if (result.code === 200) {
          this.postData = result.data;
          
          // 动态设置页面标题
          uni.setNavigationBarTitle({
            title: this.postData.name || '信息详情'
          });
        } else {
          this.error = result.msg || '获取帖子详情失败';
          console.error('获取帖子详情失败:', result.msg);
        }
      } catch (error) {
        console.error('获取帖子详情异常:', error);
        this.error = '网络错误，请稍后重试';
      } finally {
        this.isLoading = false;
      }
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 预览图片
    previewImage(current) {
      if (!this.postData.images) return;
      
      const imageUrls = this.postData.images.split(';').filter(url => url.trim() !== '');
      if (imageUrls.length === 0) return;
      
      uni.previewImage({
        current: current,
        urls: imageUrls
      });
    },
    
    // 拨打电话
    makePhoneCall() {
      if (!this.postData.phone) {
        uni.showToast({
          title: '联系方式不可用',
          icon: 'none'
        });
        return;
      }
      
      // 验证手机号格式
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.postData.phone)) {
        uni.showToast({
          title: '电话号码格式不正确',
          icon: 'none'
        });
        return;
      }
      
      uni.makePhoneCall({
        phoneNumber: this.postData.phone,
        fail: (err) => {
          console.log('拨打电话失败：', err);
          uni.showToast({
            title: '无法拨打电话',
            icon: 'none'
          });
        }
      });
    },
    
    // 分享帖子
    sharePost() {
      uni.showActionSheet({
        itemList: ['分享给微信好友', '分享到朋友圈', '分享到QQ', '分享到微博'],
        success: (res) => {
          // 根据选择的分享渠道执行相应的分享逻辑
          console.log('选择了第' + (res.tapIndex + 1) + '个分享渠道');
          // 实际项目中应调用相应的分享API
          uni.showToast({
            title: '分享功能开发中',
            icon: 'none'
          });
        }
      });
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '未知时间';
      
      try {
        const date = new Date(timeStr);
        const now = new Date();
        const diff = now - date;
        const days = Math.floor(diff / (24 * 60 * 60 * 1000));
        const hours = Math.floor(diff / (60 * 60 * 1000));
        const minutes = Math.floor(diff / (60 * 1000));
        
        if (days > 0) {
          return `${days}天前`;
        } else if (hours > 0) {
          return `${hours}小时前`;
        } else if (minutes > 0) {
          return `${minutes}分钟前`;
        } else {
          return '刚刚';
        }
      } catch (e) {
        return timeStr;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-page {
  background-color: #f5f5f7;
  min-height: 100vh;
  padding-bottom: 120rpx; // 为底部操作栏预留空间
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 导航栏样式
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;

  .back-btn, .operate-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    flex: 1;
    text-align: center;
  }
}

// 加载状态
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .loading-text {
    font-size: 28rpx;
    color: #666;
    margin-top: 20rpx;
  }
}

// 错误状态
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .error-text {
    font-size: 28rpx;
    color: #ff4d4f;
    margin-bottom: 30rpx;
    text-align: center;
  }

  .retry-btn {
    background-color: #1677FF;
    color: #fff;
    border: none;
    border-radius: 30rpx;
    padding: 12rpx 30rpx;
    font-size: 26rpx;
  }
}

// 帖子类型标签
.post-type-tag {
  width: 120rpx;
  height: 50rpx;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30rpx 0 0 30rpx;

  .tag-text {
    font-size: 26rpx;
    color: #fff;
    font-weight: 500;
  }
}

.supply-tag {
  background-color: #00b42a;
}

.demand-tag {
  background-color: #ff7d00;
}

// 帖子标题
.post-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  padding: 20rpx 30rpx;
  line-height: 1.5;
  background-color: #fff;
  margin-top: 15rpx;
}

// 基本信息
.basic-info {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin-top: 15rpx;

  .info-row {
    display: flex;
    margin-bottom: 15rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .info-item {
    flex: 1;
    display: flex;
    align-items: center;

    .info-label {
      font-size: 26rpx;
      color: #666;
      width: 100rpx;
    }

    .info-value {
      font-size: 26rpx;
      color: #333;
      flex: 1;
    }
  }
}

// 图片展示
.image-gallery {
  background-color: #fff;
  padding: 25rpx 30rpx;
  margin-top: 15rpx;

  .gallery-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: 500;
  }

  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15rpx;
  }

  .gallery-item {
    width: 220rpx;
    height: 220rpx;
    border-radius: 8rpx;
    overflow: hidden;
  }

  .gallery-img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

// 详情描述
.description-section, .contact-section {
  background-color: #fff;
  padding: 25rpx 30rpx;
  margin-top: 15rpx;

  .section-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: 500;
    position: relative;
    padding-left: 15rpx;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 24rpx;
      background-color: #1677FF;
      border-radius: 3rpx;
    }
  }
}

.description-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.8;
  white-space: pre-line; // 保留换行符
}

// 联系信息
.contact-info {
  display: flex;
  align-items: center;
  padding: 15rpx 0;

  .contact-icon {
    margin-right: 15rpx;
  }

  .contact-phone {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }

  .call-btn {
    background-color: #1677FF;
    color: #fff;
    border: none;
    border-radius: 25rpx;
    padding: 10rpx 25rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;

    .call-icon {
      margin-right: 8rpx;
    }
  }
}

// 发布时间
.publish-time {
  font-size: 24rpx;
  color: #999;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-top: 15rpx;
}

// 底部操作栏
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  height: 100rpx;
  z-index: 10;

  .contact-btn, .share-btn {
    flex: 1;
    height: 100%;
    border: none;
    color: #fff;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-btn {
    background-color: #1677FF;
    margin: 15rpx;
    border-radius: 15rpx;
  }

  .share-btn {
    background-color: #00b42a;
    margin: 15rpx 15rpx 15rpx 0;
    border-radius: 15rpx;
  }

  .btn-icon {
    margin-right: 10rpx;
  }
}
</style>



